import React, { memo, useCallback, useEffect, useRef, useState } from 'react'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'
import { NavLink } from 'react-router-dom'

import { getSizeImage, formatDate, getPlaySong,  } from '@/utils/format-utils'
import { getSongDetailAction,
         changeSequenceAction, 
         changeCurrentIndexAndSongAction,
         changeCurrentLyricIndexAction
         } from '../store/actionCreators'

import { Slider, message } from 'antd'
import { 
  PlayBarWrapper,
  Control,
  PlayInfo,
  Operator
 } from './style'

const MSNAppPlayerBar = memo(() => {
  // state hooks
  const [currentTime, setCurrentTime] = useState(0)
  const [progress, setProgress] = useState(0);
  const [isChanging, setIsChanging] = useState(false)
  const [isPlaying, setIsPlaying] = useState(false)
  // redux hooks
  const { currentSong, sequence, lyricList, currentLyricIndex } = useSelector( state => ({
    currentSong: state.getIn(['player','currentSong']),
    sequence: state.getIn(['player','sequence']),
    lyricList: state.getIn(['player', 'lyricList']),
    currentLyricIndex: state.getIn(['player', 'currentLyricIndex'])
  }),shallowEqual)
  const dispatch = useDispatch();
  useEffect(()=>{
    dispatch(getSongDetailAction(167876))
  },[dispatch])

  // other hooks
  const audioRef = useRef();
  useEffect(()=>{
    audioRef.current.src = getPlaySong(currentSong.id);
    audioRef.current.play().then( res => {
      setIsPlaying(true)
    }).catch( err => {
      setIsPlaying(false)
    })
  },[currentSong])
  // 没有值的情况下会使用后面的默认值
  const picUrl = (currentSong.al && currentSong.al.picUrl) || "";
  const singerName = (currentSong.ar && currentSong.ar[0].name) || "未知歌手"
  const duration = currentSong.dt || 0;
  const showDuration = formatDate(duration, "mm:ss");
  const showCurrentTime = formatDate(currentTime, "mm:ss")

  // handle function
  const playMusic = useCallback(() => {
    isPlaying ? audioRef.current.pause() : audioRef.current.play()
    setIsPlaying(!isPlaying)
  },[isPlaying])
  // 切换循环
  const changeSequence = ()=>{
    let currentSequence = sequence+1;
    if (currentSequence > 2) {
      currentSequence = 0
    }
    dispatch(changeSequenceAction(currentSequence))
  }
  // 上一首下一首
  const changeMusic = (tag) => {
    // 改变当前歌曲
    dispatch(changeCurrentIndexAndSongAction(tag))
  }
  const timeUpdate = (e) => {
    const currentTime = e.target.currentTime;
    if(!isChanging){
      setCurrentTime(currentTime * 1000);
      setProgress(currentTime * 1000 / duration * 100)
    }

    // 获取当前歌词
    let i = 0;
    for (; i< lyricList.length; i++){
      let lyricItem = lyricList[i];
      if (currentTime * 1000 < lyricItem.time) {
        // i = i
        break;
      }
      
    }
    // console.log('i',i-1);
    // console.log('内容',lyricList[i-1]);
    if (currentLyricIndex !== i -1) {
      dispatch(changeCurrentLyricIndexAction(i-1))
      const content = lyricList[i - 1] && lyricList[i - 1].content
      message.open({
        key: "lyric",
        content: content,
        duration: 0,
        className: "lyric-class"
      })
    }
  }
  // 歌曲结束
  const handleMusicEnded = () => {
    if (sequence ===2 ) { // 单曲循环
      audioRef.current.currentTime = 0;
      audioRef.current.play()
    } else {
      dispatch(changeCurrentIndexAndSongAction(1))
    }
  }

  const sliderChange = useCallback((value) => {
    setIsChanging(true)
    const currentTime = value / 100 * duration
    setCurrentTime(currentTime)
    setProgress(value)
  },[duration])

  const sliderAfterChange = useCallback((value) => {
    const currentTime = value / 100 * duration / 1000;
    audioRef.current.currentTime = currentTime
    setCurrentTime(currentTime * 1000)
    setIsChanging(false)
    console.log(isPlaying)

    if(!isPlaying){
      playMusic();
    }
  },[duration,isPlaying,playMusic])

  return (
    <PlayBarWrapper className="sprite_player">
      <div className="content wrap-v2">
        <Control isPlaying={isPlaying}>
          <button className="sprite_player prev" onClick={e => changeMusic(-1)}></button>
          <button className="sprite_player play" onClick={e => playMusic()}></button>
          <button className="sprite_player next" onClick={e => changeMusic(1)}></button>
        </Control>
        <PlayInfo>
          <div className="image">
              <NavLink to="/discover/player">
                <img src={getSizeImage(picUrl,34)} alt="" />
              </NavLink>
          </div>
          <div className="info">
            <div className="song">
              <span className="song-name">{currentSong.name}</span>
              <a href="#/" className="singer-name">{singerName}</a>
            </div>
            <div className="progress">
              <Slider defaultValue={30}
                      value={progress}
                      onChange={sliderChange}
                      onAfterChange={sliderAfterChange}
                      tooltip={{open: false,}}/>
              <div className="time">
                <span className="now-time">{showCurrentTime}</span>
                <span className="divider">/</span>
                <span className="duration">{showDuration}</span>
              </div>
            </div>
          </div>
        </PlayInfo>
        <Operator sequence={sequence}>
          <div className="left">
            <button className="sprite_player btn favor"></button>
            <button className="sprite_player btn share"></button>
          </div>
          <div className="right sprite_player">
            <button className="sprite_player btn volume"></button>
            <button className="sprite_player btn loop" onClick={e => changeSequence()}></button>
            <button className="sprite_player btn playlist"></button>
          </div>
        </Operator>
      </div>
      <audio ref={audioRef}
             onTimeUpdate={timeUpdate}
             onEnded={handleMusicEnded}/>
    </PlayBarWrapper>
  )
})

export default MSNAppPlayerBar